<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="header-icon iconfont">&#xe6a0;</text>
      </view>
      <text class="title">修改密码</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 主内容区 -->
    <view class="content">
      <view class="form-container">
        <view class="form-item">
          <text class="form-label">当前密码</text>
          <input 
            class="form-input" 
            type="password" 
            placeholder="请输入当前密码" 
            v-model="currentPassword"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">新密码</text>
          <input 
            class="form-input" 
            type="password" 
            placeholder="请输入新密码" 
            v-model="newPassword"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">确认新密码</text>
          <input 
            class="form-input" 
            type="password" 
            placeholder="请再次输入新密码" 
            v-model="confirmPassword"
          />
        </view>
        
        <view class="password-tips">
          <text class="tips-text">密码长度为8-20位，必须包含字母和数字</text>
        </view>
        
        <button class="submit-btn" @click="changePassword">确认修改</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  methods: {
    goBack() {
      // 使用 switchTab 返回到"我的"页面
      uni.switchTab({
        url: '/pages/user/profile'
      });
    },
    changePassword() {
      // 验证表单
      if (!this.currentPassword) {
        this.showToast('请输入当前密码');
        return;
      }
      
      if (!this.newPassword) {
        this.showToast('请输入新密码');
        return;
      }
      
      if (!this.confirmPassword) {
        this.showToast('请确认新密码');
        return;
      }
      
      if (this.newPassword !== this.confirmPassword) {
        this.showToast('两次输入的新密码不一致');
        return;
      }
      
      // 验证密码格式
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/;
      if (!passwordRegex.test(this.newPassword)) {
        this.showToast('密码必须包含字母和数字，长度为8-20位');
        return;
      }
      
      // 模拟修改密码
      uni.showLoading({
        title: '修改中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        });
        
        // 清空表单
        this.currentPassword = '';
        this.newPassword = '';
        this.confirmPassword = '';
        
        // 返回上一页
        setTimeout(() => {
          // 使用 switchTab 返回到"我的"页面
          uni.switchTab({
            url: '/pages/user/profile'
          });
        }, 1500);
      }, 1000);
    },
    showToast(title) {
      uni.showToast({
        title: title,
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F5F5F5;
}

.header {
  padding: 40rpx;
  background-color: #FF7A45;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left, .header-right {
  width: 60rpx;
}

.header-icon {
  font-family: "iconfont";
  color: #FFFFFF;
  font-size: 40rpx;
}

.title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 30rpx;
}

.form-container {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #262626;
  margin-bottom: 16rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 90rpx;
  background-color: #F5F5F5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #262626;
  box-sizing: border-box;
}

.password-tips {
  margin-bottom: 30rpx;
}

.tips-text {
  font-size: 24rpx;
  color: #8C8C8C;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #FF7A45;
  color: #FFFFFF;
  font-size: 32rpx;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style> 